<template>
  <h4> 权限列表</h4>
  <el-card>
    权限名称：
    <el-input v-model="from.PermissionName" style="width: 240px" placeholder="请输入" clearable />

    <el-button type="primary" style="margin-left: 20px;" @click="GetPermission">查询</el-button>


    <el-button type="danger" @click="reset">重置</el-button>

  </el-card>

  <el-card style="margin-top: 20px;">

    <el-button type="success" style="margin-bottom: 20px;" @click="open(null)">添加</el-button>



    <el-table :data="tableData" border style="width: 100%;height: 200px;">
      <el-table-column prop="id" label="权限编号" />
      <el-table-column prop="permissionName" label="权限名称" />
      <el-table-column prop="url" label="权限URL" />
      <el-table-column prop="permissionNo" label="权限序号" />
      <el-table-column label="操作">
        <template v-slot="scoped">
          <el-button size="small" type="primary" @click="open(scoped.row)">编辑</el-button>

          <el-button size="small" type="danger" @click="IsDelPermission(scoped.row)">删除</el-button>

        </template>

      </el-table-column>
    </el-table>

    <div style="margin-top: 20px;">

      <el-pagination v-model:current-page="page.PageIndex" v-model:page-size="page.PageSize" :page-sizes="[3, 5, 6, 8]"
        :background="true" layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount" />
    </div>
  </el-card>

  <el-dialog v-model="logic.isOpen" draggable align-center :title="logic.title" width="500">
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="权限名称">
        <el-input v-model="form.permissionName" />
      </el-form-item>
      <el-form-item label="权限URL">
        <el-input v-model="form.url" />
      </el-form-item>
      <el-form-item label="权限序号">
        <el-input v-model="form.permissionNo" />
      </el-form-item>
      <el-form-item label="父级菜单">
        <el-select v-model="form.parentId" placeholder="请选择" style="width: 240px">
          <el-option v-for="item in PermissionData" :key="item.id" :label="item.permissionName" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>

  </el-dialog>

</template>

<script lang="ts" setup>

import { readB, writeB } from '@/https/http';
import { ref, watch, onMounted } from 'vue';
import { reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// do not use same name with ref
const form = reactive(
  {
    "id": 0,
    "permissionName": "",
    "url": "",
    "permissionNo": "",
    "parentId": "请选择"
  }
)

const onSubmit = () => {

  if (logic.value.isAdd == true) {

    writeB.post("/RBACMenganment/AddPermission", form).then(res => {

      if (res.data.code == 200) {

        ElMessage.success(res.data.message);
        logic.value.isOpen = false;
        GetPermission();

      }
      else {

        ElMessage.error("添加失败");

      }

    })



  }
  else {

    writeB.post("/RBACMenganment/UpdatePermission", form).then(res => {

      if (res.data.code == 200) {

        ElMessage.success(res.data.message);
        logic.value.isOpen = false;
        GetPermission();

      }
      else {

        ElMessage.error("修改失败");

      }

    })

  }

}


//重置查询条件
const reset = () => {

  from.value.PermissionName = ""
}

//查询参数
const from = ref({

  PermissionName: "",

});



//分页参数
const page = ref({

  PageIndex: 1,
  PageSize: 3,
  "totalCount": 0,
  "pageCount": 0,

});


watch(page.value, () => {

  GetPermission();
})


const tableData = ref([])


//权限查询
const GetPermission = () => {


  readB.get("/RBACMenganment/GetPermission", {
    params: {

      PageIndex: page.value.PageIndex,
      PageSize: page.value.PageSize,
      PermissionName: from.value.PermissionName,

    }
  }).then(res => {

    if (res.data.code == 200) {

      tableData.value = res.data.pageData;
      page.value.totalCount = res.data.totalCount;
      page.value.pageCount = res.data.pageCount;
    }

  })


}

//获取权限

const PermissionData = ref([{

  "id": 0,
  "permissionName": "无"
}])


//获取权限信息
const GetPermissions = () => {


  readB.get("/RBACMenganment/GetAllPermission").then(res => {

    if (res.data.code == 200) {

      PermissionData.value = res.data.pageData;

    }

  })


}




//钩子函数
onMounted(() => {

  GetPermission();
  GetPermissions();

})


//逻辑
const logic = ref({

  isOpen: false,
  isAdd: false,
  title: ""


});


const open = (row: any) => {


  if (row == null) {
    logic.value.isOpen = true;
    logic.value.isAdd = true;
    logic.value.title = "添加"
    form.permissionName = "";
    form.url = "";
    form.permissionNo = "";
    form.parentId = '0';

  }
  else {

    logic.value.isOpen = true;
    logic.value.title = "编辑"
    logic.value.isAdd = false;
    form.permissionName = row.permissionName;
    form.url = row.url;
    form.permissionNo = row.permissionNo;
    form.id = row.id;
    form.parentId = row.parentId;

  }



}



//逻辑删除
const IsDelPermission = (row: any) => {


  ElMessageBox.confirm(
    '你确定要删除吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {

      writeB.post("/RBACMenganment/IsDelPermission", row).then(res => {

        if (res.data.code == 200) {

          ElMessage.success(res.data.message);

          GetPermission();

        }
        else {

          ElMessage.error("删除失败");

        }

      })





    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消操作',
      })
    })
}


</script>